<template>
  <el-dialog title="成员列表" :visible.sync="dialogFormVisible" :before-close="handleClose">
    <el-input
        placeholder="搜索（多个关键字用空格隔开）"
        v-model="keyWord"
        clearable>
    </el-input>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="组织架构" name="first">
        <template>
          <el-tree
              :props="departments"
              :load="loadNode"
              lazy
              show-checkbox
              @check-change="handleCheckChange">
          </el-tree>
        </template>

      </el-tab-pane>
      <el-tab-pane label="当前用户所处部门" name="second"></el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "ChooseDepartmentView",
  props: {
    open: {
      type: Boolean,
    },
  },
  data() {
    return {
      dialogFormVisible: this.open,//控制选择成员组件显示
      activeName: 'first',
      keyWord: "",//后续进行关键字搜索
      departments: {
        label: 'name',
        children: 'zones'
      },
      count: 1
    };
  },
  created() {
    this.$axios.get("/manage/warehouseAllocate/getDepartments").then(response => {
      this.departments = response.data.data
    })
  },
  watch: {
    open: function (newVal, oldVal) {
      this.dialogFormVisible = newVal
    }
  },
  methods: {
    handleCancel() {
      this.dialogFormVisible = false
      this.$emit("close")
    },
    handleSubmit() {
      this.dialogFormVisible = false
      this.$emit("close")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$emit("close")
          })
          .catch(_ => {
          });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{name: 'region1'}, {name: 'region2'}]);
      }
      if (node.level > 3) return resolve([]);

      var hasChild;
      if (node.data.name === 'region1') {
        hasChild = true;
      } else if (node.data.name === 'region2') {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }

      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [{
            name: 'zone' + this.count++
          }, {
            name: 'zone' + this.count++
          }];
        } else {
          data = [];
        }
        resolve(data);
      }, 500);
    }
  }

};
</script>
<style scoped>

</style>